<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>任务首页 </title>

    <link rel="stylesheet" th:href="@{/static/iview/iview.css}">
    <script th:src="@{/static/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/libs/vue.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/layer/layer.js}" type="text/javascript"></script>
   <script th:src="@{/static/iview/iview.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/common.js}" type="text/javascript"></script>
    <style type="text/css">
	[v-cloak] {
			  display: none;
			}
	</style>
</head>
<body>
<div id="app" v-cloak>
        <div style="margin-bottom: 6px;margin: 30px">
			<i-input v-model="content" placeholder="查询"  style="width: 300px"></i-input>
		    <i-select  v-model="schedname"  style="width: 180px" @on-change="changschedlistlist"  placeholder="调度器">
		    		   <i-option>请选择 </i-option>
		              <i-option v-for="item in schedlist"  :value="item"  :key="item">{{item}} </i-option>
		    </i-select>
		    <i-select  v-model="group"  style="width: 180px" @on-change="changgrouplist"  placeholder="任务组">
		    	       <i-option>请选择 </i-option>
		              <i-option v-for="item in grouplist"  :value="item"  :key="item">{{item}} </i-option>
		     </i-select> 
		       <i-select  v-model="status"  style="width: 80px" @on-change="changstatuslist"  placeholder="状态">
		              <i-option v-for="item in statuslist"  :value="item.id"  :key="item.value">{{item.value}} </i-option>
		     </i-select> 
			<i-button type="primary" @click="search()" icon="ios-search">搜索</i-button>
			<i-button type="primary" @click="empty()" icon="ios-close-empty">清空</i-button>
			<!-- <i-button type="info" style="float: right;" @click="add()" icon="person-add">新增</i-button> -->
		</div>
		<div style="margin-bottom: 6px;margin: 30px">
			<template> 
				<i-table border :content="self" :columns="tableTitle" :data="datalist"></i-table>
			 	<br>
<!-- 			 	<Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage" @on-page-size-change="changePageSize"></Page> -->
			 	<!--分页功能-->
				<Page :current="1" :total="dataCount" :page-size="pageSize"  @on-change="changepage"   @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page>
				 
			</template>
		</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : '#app',
	data : {
		content : '',
		pageNo : 0,
		pageSize : 10,// 每页显示多少条
		dataCount:"", // 总数据的条目
		datalist: [], //接口获取的总数据
		historyData:'',//展示的数据
		schedname:'',
		schedlist:[],
		group:'',
		grouplist:[],
		status:'',
		statuslist:[
			{"id":"WAITING","value":"等待"},
			{"id":"PAUSED","value":"暂停"},
			{"id":"ACQUIRED","value":"正常执行"},
			{"id":"BLOCKED","value":"阻塞"},
			{"id":"ERROR","value":"错误"}
		],
		tableTitle:[ 
	   {
		   title : "编号",
		   type: 'index',
		   align: 'center',
            width: 70
		},
		{
			key : "schedName",
			title : "调度器",
			 width: 150
		}, {
			key : "triggerName",
			title : "触发器",
		    width: 150
		}, {
			key : "triggerGroup",
			title : "触发器分组",
			width: 150
		}, {
			key : "jobName",
			title : "任务",
			 width: 150
		}, {
			key : "jobGroup",
			title : "任务分组",
			 width: 150
		}, 
	/* 	{
			key : "description",
			title : "描述"
		},  */
		
	   {
			key : "prevFireTime",
			title : "上次执行时间",
			 width: 150,
			render : function(h, params) {
				  return h('div',
						  formatDate(new Date(params.row.prevFireTime),'yyyy-MM-dd hh:mm:ss'));
			}
		}, 
		{
			key : "nextFireTime",
			title : "下次执行时间",
			 width: 150,
			render : function(h, params) {
				  return h('div',
						  formatDate(new Date(params.row.nextFireTime),'yyyy-MM-dd hh:mm:ss'));
			}
		}, 
		{
			key : "priority",
			title : "优先级",
			 width: 80
		}, 
		{
			key : "triggerState",
			title : "状态",
			 width: 100
		}, 
	  {
			key : "triggerType",
			title : "类型",
		    width: 80
		},  
		{
			key : "startTime",
			title : "开始时间",
			 width: 150,
			render : function(h, params) {
				  return h('div',
						  formatDate(new Date(params.row.startTime),'yyyy-MM-dd hh:mm:ss'));
			}
		}, 
		{
			key : "endTime",
			title : "结束时间",
			 width: 150,
			render : function(h, params) {
				  return h('div',
						  formatDate(new Date(params.row.endTime),'yyyy-MM-dd hh:mm:ss'));
			}
		}, 
	   {
			key : "calendarName",
			title : "日历时间",
		     width : 170
		},  
		{
			title : '操作',
			key : 'action',
			width : 170,
			align : 'left',
			render : function(h, params) {
				var functionList = [];
				//修改
				var edit = h('Button', {
					props : {
						type : 'primary',
						size : 'small',
						icon : 'edit'
					},
					style : {
						marginRight : '8px'
					},
					on : {
						click : function() {
							vm.edit(params.row);
						}
					}
				}, '修改');
				functionList.push(edit);
				//移除
				var remove = h('Button', {
					props : {
						type : 'primary',
						size : 'small',
						icon : 'close'
					},
					style : {
						marginRight : '8px'
					},
					on : {
						click : function() {
							vm.remove(params.row.jobName,params.row.jobGroup);
						}
					}
				}, '移除');
				functionList.push(remove);
			
				// 返回方法集合
				return h('div', functionList);
			}
		}]
		
	},
	methods : {
		//搜索
		search : function(){
			  this.loadlist(this.pageNo);
		},
		empty : function(){
			vm.content = '';
			this.loadlist(this.pageNo);
		},
		changschedlistlist:function(value){
			vm.schedname=value;
		},
		changstatuslist:function(value){
			vm.status=value;
		},
	   changgrouplist:function(value){
			vm.group=value;
		}, 
		scheddroplist:function(){
			$.ajax({
				url:"../job/loadShedNames",
				type:"get",
				contentType: 'application/json', 
				success: function(data) {
						if(data.result != null){
							vm.schedlist = data.result;
						}
				}
			});
		},
		groupdroplist:function(){
			$.ajax({
				url:"../job/loadJobGrops",
				type:"get",
				contentType: 'application/json', 
				success: function(data) {
						if(data.result != null){
							vm.grouplist = data.result;
						}
				}
			});
		},
		//任务列表(自行实现分页)
		loadlist : function(index) {
			 let self=this;   //申明个this对象
				
				var page = {};
				page['pageIndex']= index;
				page['pageSize']= this.pageSize;
						
				var params = {};
				params['schedName']= this.content;
				params['jobName'] = this.content;
				params['jobGroup'] = this.content;
				params['triggerName'] = this.content;
				params['triggerGroup'] = this.content;
				params['triggerState'] = this.content;
				
				 var conditional = {};
				 conditional['page'] = page;
				 conditional['params'] = params;
				 
				var json =  JSON.stringify(conditional);
				
			$.ajax({
				url:"../job/findJobTriggers",
				type:"post",
				contentType: 'application/json', 
				data: json,
				success: function(data) {
					vm.datalist = data.result.rows;
					vm.dataCount = data.result.total; //接口返回数据的总条目数
					if(vm.dataCount < vm.pageSize){   //如果数据的总条目数小于每页显示的条目数就赋值，否则就提取总数据的第三条
                        vm.historyData   = vm.JobData
                    }else{
                        vm.historyData = vm.datalist.slice(0,self.pageSize);
                    }
				}
			});
		},
        changepage(index){
            this.loadlist(index);
        },
        changePageSize:function(num) { 
            this.pageSize = num;
            this.changepage(1);
        },
		//触发任务
		trigger : function(jobName,jobGroup){
			$.ajax({
				url:"../job/trigger",
				type:"post",
				data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
				success: function(result) {
					if(result.code=="0"){
						vm.$Notice.success({
		                    desc:  '任务执行成功'
		                });
					}
				}
			});
		},
		//停止任务
		pause : function(jobName,jobGroup){
			$.ajax({
				url:"../job/pause",
				type:"post",
				data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
				success: function(result) {
					if(result.code=="0"){
						vm.$Notice.success({
		                    desc:  '停止任务成功'
		                });
						vm.loadlist();
					}
				}
			});
		},
		//恢复任务
		resume : function(jobName,jobGroup){
			$.ajax({
				url:"../job/resume",
				type:"post",
				data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
				success: function(result) {
					if(result.code=="0"){
						vm.$Notice.success({
		                    desc:  '恢复任务成功'
		                });
						vm.loadlist();
					}
				}
			});
		},
		//新建任务(略简单)
		add : function(){
			dialogOpen({
				title: '新增',
				url: 'task/add.shtml',
				//屏幕小 滚动条显示
				scroll : true,
				width: '450px',
				height: '450px',
				yes : function(iframeId) {
					top.frames[iframeId].vm.acceptClick();
				},
			});  
		},
		edit : function(quartz){
			dialogOpen({
				title: '修改',
				url: 'task/add.shtml',
				//屏幕小 滚动条显示
				scroll : true,
				width: '450px',
				height: '450px',
				success : function(iframeId){
					top.frames[iframeId].vm.formQuartz = quartz;
				},
				yes : function(iframeId) {
					top.frames[iframeId].vm.acceptClick();
				},
			});
		},
		//移除任务
		remove : function(jobName,jobGroup){
			var that = this;
			top.layer.confirm('确定要移除任务吗？', {
			      btn: ['确定','取消'] //按钮
			}, function(){
				$.ajax({
					url:"../job/remove",
					type:"post",
					data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
					success: function(result) {
						if(result.code=="0"){
							top.layer.msg('任务移除成功', {icon: 1});
							window.setTimeout(that.loadlist(),1500); 
						}
					}
				});
			}, function(){
			  
			});
		}
	},
	created : function() {
		 this.loadlist();
		 this.scheddroplist();
         this.groupdroplist();
	}
})

</script>
</body>
</html>